<template>
  <hx-page>
    <div class='hxPage_center'>
      <div class='listWrap' v-if="cardInfo.name">
        <hx-list :info="cardInfo"></hx-list>
        <div class='hx_btn_row'>
          <div class='hx_btn_col'
               v-for="(item,index) in bts"
               :key="index"
               @click="dealAction(item[0])"
          >
            <div class='hxBadge_wrap' v-if="item[0] === 'rewardList' && unTakeCnt > 0">
              {{ item[1] }}
              <div
                  class='hxBadge'>{unTakeCnt}
              </div>
            </div>
            <template v-else>
              {{ item[1] }}
            </template>
          </div>
        </div>
        <div class='hx_btn_row' v-if="mBts.length>0">
          <div class='hx_btn_col'
               v-for="(item,index) in mBts"
               :key="index"
               @click="dealAction(item[0])"
          >
            {{ item[1] }}
          </div>
        </div>
      </div>

      <div
          v-else
          class='jiaWrap'
          @click="dealAction('bind')">
        <div class='add'>+</div>
      </div>
    </div>
  </hx-page>
</template>

<script>
import {hxData} from "../../../utils/hx-data";
import {hxParam} from "../../../config/hx-param";
import {HxLogin, HxPost} from "../../../service/http";
import {HxTaro} from "../../../utils/hx-taro";
import {HxTask} from "../../../service/hx-task";
import {hxConfig} from "../../../config/hx-config";

export default {
  data() {
    return {
      cardInfo: {},
      bts: [],
      mBts: []
    };
  },
  computed: {
    unTakeCnt() {
      return Number(hxData.get('unTakeCnt'))
    }
  },
  onShow() {
    HxTaro.checkUpdate();
    HxTaro.checkValid();
    uni.showLoading({title: '加载中...', mask: true})
        .then(() => {
          return HxLogin();
        })
        .then(() => {
          return HxPost('cardInfo', {cardId: ''});
        })
        .then((res) => {
          this.bts = Object.entries(hxConfig.buttons);
          if (res.isMealCater === 'Y') {
            hxParam.isMealCater = true;
          }
          if (res.mnPrivMap) {
            if (res.mnPrivMap[0] === '1') {
              hxParam.isManageOrder = true;
            }
            if (res.mnPrivMap[1] === '1') {
              hxParam.isManagePay = true;
            }
          }
          // TODO 根据后台返回数据判断
          hxParam.isMealCater = true;
          hxParam.isManageOrder = true;
          hxParam.isManagePay = true;
          const mButtons = {...hxConfig.mButtons};
          if (!hxParam.isMealCater) {
            delete mButtons.stopApproval
          }
          if (!hxParam.isManageOrder) {
            delete mButtons.orderTotal
          }
          if (!hxParam.isManagePay) {
            delete mButtons.payTotal
          }
          this.mBts = Object.entries(mButtons);
          uni.setStorageSync('cardId', res.cardId)
          HxTask.run(res.cardId);
          uni.hideLoading();
          this.cardInfo = res;
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({title: err.retMsg || '未知错误', icon: 'none', duration: 2 * 1000}).catch();
        });
  },
  methods: {
    dealAction(action) {
      if (['unbind', 'loss'].includes(action)) {
        const content = action === 'unbind' ? '解绑' : '挂失';
        uni.showModal({
          title: content,
          content: '确定' + content + '该卡吗？',
          cancelText: '取消',
          confirmText: '确定'
        })
            .then((data) => {
              if (data[1].confirm) {
                return HxPost(action, {cardId: hxParam.cardId});
              } else {
                return Promise.reject('cancel');
              }
            })
            .then(() => {
              if (action === 'unbind') {
                uni.setStorageSync('cardId', '');
                this.cardInfo = {};
                uni.$emit('payNum', {index: 2, text: ''});
              }
              uni.showToast({title: content + '成功', icon: 'success', duration: 2 * 1000}).catch();
            })
            .catch((err) => {
              if (err !== 'cancel') {
                uni.showToast({title: err.retMsg || '未知错误', icon: 'none', duration: 2 * 1000}).catch();
              }
            });
      } else {
        let url = '/pages/' + action + '/index?cardInfo=' + JSON.stringify(this.cardInfo);
        uni.navigateTo({
          url: url
        }).catch();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
$color-border: #e1e1e1;
.hxPage_center {
  padding: 0 20PX;
}

.jiaWrap {
  border: 1PX solid $color-border;
  background: #fff;
  border-radius: 10PX;
  height: 160PX;
  display: flex;
  justify-content: center;
  align-items: center;

  .add {
    color: #CCCCCC;
    font-size: 100PX;
  }
}

.listWrap {
  border: 1PX solid $color-border;
  background: #fff;
  border-radius: 10PX;
  padding-top: 20PX;

  .hx_btn_row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 15PX;
    margin-top: 15PX;
    border-top: 1PX solid #DADADA;

    .hx_btn_col {
      display: flex;
      justify-content: center;
      color: #b71120;
      font-size: 17PX;
      font-weight: 700;
      border-left: 1PX solid #000;
      line-height: 1.3;
      margin-top: 15PX;
      width: 33.33%;
      box-sizing: border-box;

      &:nth-child(3n+1) {
        border-left: none;
      }
    }

    &:nth-of-type(2) {
      margin-top: 0;
    }
  }
}
</style>
